<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>地图导览</title>
</head>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=d813e87ac77e4380d89e96084ed161e8"></script>
<script src="//webapi.amap.com/ui/1.1/main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<style type="text/css">
    html,
    body {
        height: 100%;
        margin: 0px;
        padding: 0px;
        background: #ffffff;
        overflow: hidden;
    }

    #container {
        width: 100%;
        height: 100%;
        position: relative;
        /*bottom: -20px;*/
    }
    .nav_list{
        width: 100%;
        padding-left: 10px;
        padding-right: 10px;
        box-sizing: border-box;
        height: 54px;
        display: flex;
        align-items: center;
        background-color: rgba(245, 245, 245, 100);
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1001;
    }
    .nav_item{
        width: 25%;
        position: relative;
        height: 54px;
    }
    .nav_item>div{
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: rgba(245, 245, 245, 100);
    }
    .nav_item>div:first-child{
        z-index: 10;
    }
    .active>div:last-child{
        z-index: 20;
    }
    .img{
        text-align: center;
    }
    img{
        width: 32px;
        height: 32px;
    }
    .name{
        text-align: center;

    }
    text{
        color: rgba(102, 102, 102, 100);
        font-size: 14px;
        text-align: center;
        font-family: PingFangSC-regular;
    }
    .red{
        color: rgba(194, 31, 48, 100);
    }
    .content{
        display: flex;
        justify-content: space-between;
        height: 70px;
        align-items: center;
        width: 200px;
        padding: 10px;
        background: #ffffff;
        border-radius: 6px;
        box-shadow: 0 0  3px  #ddd;
        transition: all linear .3s;
    }
    .content .left img{
        height: 50px;
        width: 50px;
    }
    .content .right .name{
        font-size: 16px;
        color: #C21F30;
        font-weight: bold;
    }
    .content .right .desc{
        padding-left: 10px;
        margin-top: 8px;
        font-size: 14px;
    }
    .img_b{
        text-align: center;
    }
    .img_b img{
        width: 30px;
        height: 20px;
        position: relative;
        top: -3px;
    }
</style>
<body>
<div id="container"></div>

<!--            上方导航-->
<div class="nav_list">
    <div onclick="handleToggleAct(0)" data-key="0" data-lat="36.2151193" data-lng="117.006570" class="nav_item active">
        <div v-show="actkey!=1">
            <div class="img">
                <img src="./image/map_msms.png"></img>
            </div>
            <div class="name">
                <span>民俗美食</span>
            </div>
        </div>
        <div v-show="actkey==1" >
            <div class="img">
                <img src="./image/map_msms_.png"></img>
            </div>
            <div class="name">
                <span class="red">民俗美食</span>
            </div>
        </div>
    </div>
    <div onclick="handleToggleAct(1)" data-key="1" data-lat="36.2151193" data-lng="117.006570" class="nav_item">
        <div v-show="actkey!=2">
            <div class="img">
                <img src="./image/map_jd.png"></img>
            </div>
            <div class="name">
                <span>景点</span>
            </div>
        </div>
        <div v-show="actkey==2">
            <div class="img">
                <img src="./image/map_jd_.png"></img>
            </div>
            <div class="name">
                <span class="red">景点</span>
            </div>
        </div>
    </div>
    <div onclick="handleToggleAct(2)" data-key="2" data-lat="36.2151193" data-lng="117.006570" class="nav_item">
        <div v-show="actkey!=3">
            <div class="img">
                <img src="./image/map_ms.png"></img>
            </div>
            <div class="name">
                <span>民宿</span>
            </div>
        </div>
        <div v-show="actkey==3">
            <div class="img">
                <img src="./image/map_ms_.png"></img>
            </div>
            <div class="name">
                <span class="red">民宿</span>
            </div>
        </div>
    </div>
    <div onclick="handleToggleAct(3)" data-key="3" data-lat="36.2151193" data-lng="117.006570" class="nav_item">
        <div v-show="actkey!=4">
            <div class="img">
                <img src="./image/map_xsj.png"></img>
            </div>
            <div class="name">
                <span>洗手间</span>
            </div>
        </div>
        <div v-show="actkey==4">
            <div class="img">
                <img src="./image/map_xsj_.png"></img>
            </div>
            <div class="name">
                <span class="red">洗手间</span>
            </div>
        </div>
    </div>
    <div onclick="handleToggleAct(4)" data-key="4" data-lat="36.2151193" data-lng="117.006570" class="nav_item">
        <div v-show="actkey!=5">
            <div class="img">
                <img src="./image/map_tcz.png"></img>
            </div>
            <div class="name">
                <span>停车场</span>
            </div>
        </div>
        <div v-show="actkey==5">
            <div class="img">
                <img src="./image/map_tcz_.png"></img>
            </div>
            <div class="name">
                <span class="red">停车场</span>
            </div>
        </div>
    </div>
</div>


<script type="text/javascript">
    var nav_item_els = document.getElementsByClassName('nav_item')
    function handleToggleAct(key) {
        if(nav_item_els[key].className == 'nav_item active'){
            return false
        }
        nav_item_els[key].className = 'nav_item active'
        for(var i=0;i<nav_item_els.length;i++){
            if(nav_item_els[i].dataset.key!=key){
                nav_item_els[i].className = 'nav_item'
            }
        }
        var lat = nav_item_els[key].dataset.lat
        var lng = nav_item_els[key].dataset.lng
        // var infoWindowLocation = new TMap.LatLng(lat,lng);//创建一个坐标
        // map.panTo(infoWindowLocation)
        // create_W(lat,lng)
    }
    // function closeInfoWindow() {
    //     map.clearInfoWindow();
    // }
    (function () {
        // d813e87ac77e4380d89e96084ed161e8
// JSAPI2.0 moveTo 示例

        var Bounds = new AMap.Bounds([117.005670, 36.213983],[117.008070, 36.215483])
        var center = Bounds.getCenter()
        var screl1 = 16
        var screl2 = 17
        var screl3 = 18
        var screl4 = 19
        var screl5 = 20
        var imageLayer = new AMap.ImageLayer({
            url: 'http://192.168.1.18:5500/image/fgck_.png',
            bounds: new AMap.Bounds(
                [117.005670, 36.213983],
                [117.008070, 36.215483]
            ),
            zooms: [16, 20]
        });
        var map = new AMap.Map('container', {
            zoom:14,//级别
            center: center,//中心点坐标
            viewMode:'2D',//使用3D视图
            // zooms: [16,20],
            layers: [
                AMap.createDefaultLayer(),
                // AMap.MoveAnimation,
                imageLayer,
            ],
            scrollWheel:false,
            touchZoomCenter:1,
            resizeEnable: true,
            doubleClickZoom:false
        });

//加载DistrictCluster，loadUI的路径参数为模块名中 'ui/' 之后的部分
//         AMapUI.loadUI(['geo/DistrictCluster'], function(DistrictCluster) {
//             //启动页面
//             initPage(DistrictCluster);
//         });
//         function initPage(DistrictCluster) {
//
//             var distCluster = new DistrictCluster({
//                 map: map, //所属的地图实例
//
//                 getPosition: function(item) {
//                     //返回数据项中的经纬度位置
//                     return item.position;
//                 }
//             });
//
//             //随机创建一批点，仅作示意
//
//             var points = [
//                 ["117.006570", "36.2151893"],
//                 ["117.006670", "36.2157193"],
//                 ["117.006770", "36.2156193"],
//                 ["117.006770", "36.2156193"],
//                 ["117.006770", "36.2156193"],
//                 ["117.006770", "36.2156193"],
//                 ["117.006770", "36.2156193"],
//                 ["117.006770", "36.2156193"],
//                 ["117.006470", "36.2156193"],
//                 ["117.006770", "36.2156193"],
//                 ["117.005770", "36.2156193"],
//                 ["117.006770", "36.2156193"],
//                 ["117.007770", "36.2156193"],
//                 ["117.008770", "36.2156193"],
//                 ["117.009770", "36.2156193"],
//             ]
//             //设置数据
//             distCluster.setData(points);
//         }


        map.on('complete',function () {
            map.setBounds(new AMap.Bounds(
                [117.005670, 36.213983],
                [117.008070, 36.215483]
            ), false, [30,30,30,30])
            setTimeout(function () {
                var bounds = map.getBounds();
                map.setLimitBounds(bounds);
            },500)
            var layer = new AMap.TileLayer.Flexible({
                cacheSize: 30,
                zooms:[16,20],
                // zIndex: 200,
                createTile: function (x, y, z, success, fail) {
                    var img = document.createElement('img');
                    img.onload = function () {
                        success(img)
                    };
                    img.crossOrigin = "anonymous";// 必须添加，同时图片要有跨域头
                    img.onerror = function () {
                        fail()
                    };
                    // console.log(x, y, z,'x, y, z')
                    img.src = 'http://localhost:5500/image/fgck_.png';
                }
            });
            // layer.setMap(map);
            // // 加载点聚合插件
            map.plugin(["AMap.MarkerCluster"],function(){
                // var cluster = new AMap.MarkerCluster(map, points, {
                //     gridSize: 80 // 聚合网格像素大小
                // });
            });
            var points = [
                { lnglat: ["117.006570", "36.2151893"],id:"test" },
                { lnglat: ["117.006670", "36.2157193"] ,id:"test"},
                { lnglat: ["117.006770", "36.2156193"] ,id:"test"},
                { lnglat: ["117.006870", "36.2157193"] ,id:"test"},
                { lnglat: ["117.006970", "36.2155193"] ,id:"test"},
                { lnglat: ["117.0061070", "36.2141193"] ,id:"test"},
                { lnglat: ["117.006110", "36.2153193"] ,id:"test"},
                { lnglat: ["117.006170", "36.2152193"] ,id:"test"},
                { lnglat: ["117.006270", "36.2152193"] ,id:"test"},
                { lnglat: ["117.006370", "36.2151193"] ,id:"test"},
                { lnglat: ["117.006470", "36.2159193"] ,id:"test"},
                { lnglat: ["117.006570", "36.2158193"] ,id:"test"},
                { lnglat: ["117.006670", "36.2150193"] ,id:"test"},
                { lnglat: ["117.006770", "36.2151193"] ,id:"test"},
                { lnglat: ["117.006870", "36.2152193"] ,id:"test"},
            ]
            var _renderClusterMarker = function (context) {
                var div = document.createElement('div');
                div.innerHTML = `<div style="transition:all linear .3s;position:relative;background: #fff;width: 40px;height: 40px;text-align: center;line-height: 40px;color: #CB9B47;border-radius: 12px;font-size: 22px;"><span>${context.count}</span>
<img style="width: 20px;height: 11px;position: absolute;bottom: -10px;left: 50%;margin-left: -10px;" src="./image/MPIS-CaretBottom.png" alt=""></div>`
                // 自定义点击事件
                div.style.transition = 'all linear .3s'
                context.marker.on('click', function(e) {
                    // if(context.count == 11){
                    //     map.setBounds(new AMap.Bounds(
                    //         [117.005670, 36.213983],
                    //         [117.008070, 36.215483]
                    //     ), false, [30,30,30,30])
                    //     setTimeout(function () {
                    //         var bounds = map.getBounds();
                    //         map.setLimitBounds(bounds);
                    //     },500)
                    // }
                    console.log(context)
                    // map.setFitView(
                    //     context.clusterData,  // 覆盖物数组
                    //     false,  // 动画过渡到制定位置
                    //     [60, 60, 60, 60],  // 周围边距，上、下、左、右
                    //     10,  // 最大 zoom 级别
                    // );
                });
                context.marker.setOffset(new AMap.Pixel(-20, -20));
                context.marker.setContent(div)
                context.marker.startMove()
            };
            var infoWindow = new AMap.InfoWindow({
                isCustom: true,  //使用自定义窗体
                content: `  <div>
                                <div align="right"><div  style="font-size:18px;">×</div></div>
                                <div class="content" id="content">
                            <div class="left">
                                <img src="./image/map_jd_.png"/>
                            </div>
                            <div class="right">
                                <div class="name"><span>民宿文化美食街</span></div>
                                <div class="desc"><span>八大特色业态：传承印记、宴遇四海、...</span></div>
                            </div>
                        </div>
                        <div class="img_b">
                                <img src="./image/MPIS-CaretBottom.png" />
                            </div>
                        </div>`,
                offset: new AMap.Pixel(0, 0)
            });

            var _renderMarker = function(context) {
                var div = document.createElement('div');
                div.innerHTML = `<div style="width: 40px;height: 44px;   background: url('./image/dtdw.png') no-repeat; background-size: cover;display: flex;align-items: center;justify-content: center;"><img style="margin-top: -3px;display: inline-block;width: 20px;height: 20px;" src="./image/map_jd_.png" alt=""></div>`
                div.style.transition = 'all linear .3s'

                context.marker.on('click', function(e){
                    map.panTo(context.marker.getPosition())
                    console.log()
                    // context.marker.moveTo([117.008070, 36.215083], {
                    //     duration: 300,
                    //     delay: 0,
                    // });

                    infoWindow.open(map, context.data[0].lnglat);
                })
                var offset = new AMap.Pixel(-20, -22);
                context.marker.setContent(div)
                context.marker.setOffset(offset)
                AMap.plugin('AMap.MoveAnimation', function(){
                    context.marker.startMove()
                });
                context.marker.startMove()
            }
            var gridSize = 60
            var cluster = new AMap.MarkerCluster(map, points, {
                gridSize: gridSize, // 设置网格像素大小
                clusterByZoomChange:false,
                renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
                renderMarker: _renderMarker, // 自定义非聚合点样式
            });
        })
        var zoom_ = map.getZoom(0)
        map.on('zoomend',function (e) {
            var zoom = map.getZoom(0)
            // if(zoom>zoom_){
            //     zoom+=1
            //     if(zoom==19){
            //         map.setZoom(19.5)
            //     }else {
            //         map.setZoom(zoom)
            //     }
            // }else {
            //     zoom-=1
            //     if(zoom==19){
            //         map.setZoom(18)
            //     }else {
            //         map.setZoom(zoom)
            //     }
            // }
            //
            // if(zoom<screl3){
            //     var bounds = map.getBounds();
            //     setTimeout(function () {
            //         var bounds = map.getBounds();
            //         map.setLimitBounds(bounds);
            //     },500)
            //     // map.setZoomAndCenter(zoom, center)
            //     map.clearInfoWindow()
            // }else {
            //     map.setLimitBounds(Bounds);
            // }
        })
        map.on('mousewheel',function (e) {
            var zoom = map.getZoom(0)
            if(e.originEvent.wheelDelta>0){
                zoom+=1
                if(zoom==19){
                    map.setZoom(19.5,false,300)
                }else {
                    map.setZoom(zoom,false,300)
                }
            }else {
                zoom-=1
                if(zoom==19){
                    map.setZoom(18,false,300)
                }else {
                    map.setZoom(zoom,false,300)
                }
            }

            if(zoom<screl3){
                var bounds = map.getBounds();
                setTimeout(function () {
                    var bounds = map.getBounds();
                    map.setLimitBounds(bounds);
                },500)
                map.setZoomAndCenter(zoom, center)
                map.clearInfoWindow()
            }else {
                map.setLimitBounds(Bounds);

            }
        })
    })()
</script>
</body>
</html>